<template>
  <div class="map_container">
    <div id="container" style="width:100vw; height:100vh"></div>
  </div>
</template>

<script>
/* eslint-disable */
import $ from 'jquery'
export default {
  data() {
    return {
      map: null,
      datas: [
        {
          id: '1',
          pos: [39.959228, 116.367874]
        },
        {
          id: '2',
          pos: [39.988169, 116.279984]
        },
        {
          id: '3',
          pos: [39.847558, 116.402893]
        },
        {
          id: '4',
          pos: [39.941857, 116.383667]
        },
        {
          id: '5',
          pos: [40.022882, 116.551208]
        },
        {
          id: '6',
          pos: [39.819085, 116.581421]
        }
      ]
    }
  },
  computed: {
    datas2() {
      return this.datas.map(v => {
        return {
          id: v.id,
          pos: [v.pos[0] + 0.01, v.pos[1] + 0.01]
        }
      })
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    setMarker() {
      const Marker = qq.maps.Marker
      const LatLng = qq.maps.LatLng

      let markersArray = []
      setInterval(() => {
        deleteOverlays(markersArray)
        const oldData = _.cloneDeep(this.datas)
        this.datas = this.datas.map(v => {
          return [v[0] + 0.01, v[1] + 0.01]
        })
        for (let i = 0; i < this.datas.length; i++) {
          const lt = new LatLng(this.datas[i][0], this.datas[i][1])
          const mk = new Marker({
            position: lt,
            map: this.map
          })
          markersArray.push(mk)
        }
      }, 3000)

      function deleteOverlays() {
        if (markersArray) {
          for (let i in markersArray) {
            markersArray[i].setMap(null)
          }
          markersArray = []
        }
      }
    },

    // 经纬度计算角度
    GetDistance(lat1, lng1, lat2, lng2) {
      var radLat1 = (lat1 * Math.PI) / 180.0
      var radLat2 = (lat2 * Math.PI) / 180.0
      var a = radLat1 - radLat2
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
      let deg = (Math.atan(b / a) * 360) / (2 * Math.PI)
      if (radLat2 < radLat1) {
        deg = deg - 90 - 90
      } else {
        deg = deg
      }
      return deg
    },

    initMap() {
      this.map = new qq.maps.Map(document.getElementById('container'), {
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 13
      })

      const Map = qq.maps.Map
      const Marker = qq.maps.Marker
      const LatLng = qq.maps.LatLng
      const Event = qq.maps.event

      const MarkerImage = qq.maps.MarkerImage
      const MarkerShape = qq.maps.MarkerShape
      const MarkerAnimation = qq.maps.MarkerAnimation
      const Point = qq.maps.Point
      const Size = qq.maps.Size
      const ALIGN = qq.maps.ALIGN

      const MVCArray = qq.maps.MVCArray
      const MarkerCluster = qq.maps.MarkerCluster
      const Cluster = qq.maps.Cluster
      const MarkerDecoration = qq.maps.MarkerDecoration

      const InfoWindow = qq.maps.InfoWindow

      // this.setMarker() // 设置多个marker
      Marker.prototype.setId = function(id) {
        // 增加id属性，标识marker，估计是车牌号
        this.id = id
      }

      // moveTo方法测试
      // const latLng = new LatLng(39.916527, 116.397128)
      // const markerer = new Marker({
      //   position: latLng,
      //   map: this.map
      // })
      // markerer.setId('11111')
      // console.log(markerer)
      // const latLng2 = new LatLng(39.926527, 116.407128)
      // markerer.moveTo(latLng2, 50)
      let markerList = []

      const infoWin = new qq.maps.InfoWindow({
        map: this.map
      })

      for (let i = 0; i < this.datas.length; i++) {
        const Lat = new LatLng(this.datas[i].pos[0], this.datas[i].pos[1])
        const icon = new MarkerImage('http://192.168.200.248/files/f1.jpg')
        const mk = new Marker({
          position: Lat,
          map: this.map
        })
        mk.setId(this.datas[i].id)
        // mk.setTitle('22222')
        mk.setIcon(icon)
        markerList.push(mk)
      }

      for (let i = 0; i < this.datas2.length; i++) {
        // const oldLat = new LatLng(this.datas[i].pos[0], this.datas[i].pos[1])
        const oldMarker = markerList.find(v => v.id === this.datas2[i].id)
        // console.log(oldMarker.position.lat, oldMarker.position.lng)
        const newLat = new LatLng(this.datas2[i].pos[0], this.datas2[i].pos[1])
        let rotate = this.GetDistance(
          oldMarker.position.lat,
          oldMarker.position.lng,
          this.datas2[i].pos[0],
          this.datas2[i].pos[1]
        )

        // 添加事件的模块
        // qq.maps.event.addListener(oldMarker, 'click', function() {
        //   infoWin.open()
        //   infoWin.setContent(
        //     '<div style="text-align:center;white-space:' +
        //       'nowrap;margin:10px;">这是第 ' +
        //       i +
        //       ' 个标注</div>'
        //   )
        //   infoWin.setPosition(oldMarker)
        // })

        qq.maps.event.addListener(oldMarker, 'mouseover', e => {
          console.log(oldMarker)
          const decoration = new MarkerDecoration(
            `<div id="${e.target.id}" style="transform: rotate(-${rotate}deg);width:200px;height:100px; background-color: #ffffff">
              ${e.target.id}
            </div>`,
            new Point(0, -50)
          )
          oldMarker.setDecoration(decoration)
          setTimeout(() => {
            $(`#${e.target.id}`)
              .parent()
              .parent()
              .css({ overflow: 'visible' })
          }, 100)
        })

        qq.maps.event.addListener(oldMarker, 'mouseout', function() {
          const decoration = new MarkerDecoration('', new Point(0, -5))
          oldMarker.setDecoration(decoration)
        })

        // 转向,移动模块
        oldMarker.setRotation(rotate)
        oldMarker.moveTo(newLat, 100)
      }

      // const citylocation = new qq.maps.CityService({
      //   complete: function(result) {
      //     map.setCenter(result.detail.latLng)
      //   }
      // })
      // // 调用searchLocalCity();方法    根据用户IP查询城市信息。
      // citylocation.searchLocalCity()

      // qq.maps.event.addListener(qqMap, 'click', function(event) {
      //   alert(
      //     '您点击的位置为:[' +
      //       event.latLng.getLng() +
      //       ',' +
      //       event.latLng.getLat() +
      //       ']'
      //   )
      // })
      // removeMarker
      // const markers = new MVCArray()
      // for (let i = 0; i < data.length; i++) {
      //   const latLng = new LatLng(data[i][0], data[i][1])
      //   // const decoration = new MarkerDecoration(i, new Point(0, -5))
      //   const marker = new Marker({
      //     position: latLng,
      //     map: map
      //   })
      //   markers.push(marker)
      // }
      // const markerClusterer = new MarkerCluster({
      //   map: map,
      //   minimumClusterSize: 2, //默认2
      //   markers: markers,
      //   zoomOnClick: true, //默认为true
      //   gridSize: 30, //默认60
      //   averageCenter: true, //默认false
      //   maxZoom: 18 //默认18
      // })
      // markerClusterer.clearMarkers()
      // const markers = new MVCArray()
      // for (let i = 0; i < data.length; i++) {
      //   const latLng = new LatLng(data[i][0] + 0.000001, data[i][1] + 0.000001)
      //   // const decoration = new MarkerDecoration(i, new Point(0, -5))
      //   const marker = new Marker({
      //     position: latLng,
      //     map: map
      //   })
      //   markers.push(marker)
      // }
      // markerClusterer.addMarkers(markers)

      // Event.addListener(markerClusterer, 'clusterclick', function(evt) {
      //   // writeLog("mouse event", eventType);
      //   const ss = evt
      //   // alert('点击了聚合点');
      // })
    },
    createCluster(map) {}
  }
}
</script>

<style lang="scss" scoped>
.map_container {
}
</style>
